<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2022-10-18 09:01:14
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-06-02 10:53:52
 * @FilePath: /uniapp_framework/src/components/customLoading/index.vue
 * @Description: loading加载组件
-->
<script setup>
defineProps({
    bgColor: { // loading背景
        type: String,
        default: "#f6f6f6"
    }
})
</script>
<template>
    <!-- 如需更换 loadging 样式 可以查看  
			https://blog.csdn.net/weixin_39415598/article/details/121695277
			http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading （纯css实现117个Loading效果）
			-->
    <div class="com__box" :style='{ background: bgColor }'>
        <div class="loading"></div>
    </div>
</template>
<style  scoped>
.com__box {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading {
    width: 25px;
    height: 25px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 5px solid;
    border-top-color: rgba(254, 168, 23, 0.65);
    border-bottom-color: rgba(57, 154, 219, 0.65);
    border-left-color: rgba(188, 84, 93, 0.95);
    border-right-color: rgba(137, 188, 79, 0.95);
    animation: loading-animation 2.5s ease-in-out infinite alternate;
}

@keyframes loading-animation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(720deg);
    }
}
</style>
